
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      #sexyline { 
          margin: 25px 0;
          height: 1px;
          background: #eeeee;
          background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, grey));
      }​
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--Custom JS scripts-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit" style="padding: 10px 10px 10px 10px;">
        <div style="text-align: center;">
        <h2>Your Messages</h2>
        </div>
      </div>
      <div class="row">
        <div class="span12">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#">Inbox</a>
          </li>
          <li><a href="#">Sentbox</a></li>
        </ul>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium odio non erat laoreet id sodales eros faucibus. Mauris quis odio eget orci tincidunt aliquet. Pellentesque condimentum massa a elit semper tristique. Vestibulum quis arcu vel lectus gravida scelerisque. Pellentesque non libero lacus. Donec sollicitudin, metus ac hendrerit pellentesque, ligula urna facilisis mauris, ut iaculis velit lectus at odio. Maecenas nec magna sed ipsum ultrices mollis. Pellentesque rhoncus dapibus turpis, vel aliquam sem interdum eu. In tristique pharetra enim. Cras lacinia, ligula eu gravida consectetur, odio augue vestibulum nunc, imperdiet dapibus nibh lorem non eros. Nulla tincidunt malesuada interdum. Pellentesque gravida posuere nisi, non blandit nibh egestas vel. Donec auctor imperdiet lorem, hendrerit rhoncus arcu ornare sed.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <blockquote>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
		    <small>Someone famous</small>
		  </blockquote>
		  <div class="pagination" align="center">
		    <ul>
		      <li><a href="#">Prev</a></li>
		      <li class="active">
		        <a href="#">1</a>
		      </li>
		      <li><a href="#">2</a></li>
		      <li><a href="#">3</a></li>
		      <li><a href="#">Next</a></li>
		    </ul>
		  </div> 
		</div> 
      <footer>
        <p style="text-align: center;">&copy; PiP 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>
